<template>
  <div class="chat-container">
    <van-nav-bar left-arrow fixed @click-left="goBack">
      <template #title>
        <div class="title">
          <span class="title-name">{{ chatInfo.name }}</span>
          <OnlineStatus :status="chatInfo.online" />
        </div>
      </template>
    </van-nav-bar>
    <div class="chat">
      <ChatMsgList :contactId="contactId" ref="chatMsgList" />
      <ChatBottom
        :contactId="contactId"
        @send-text="handleSendText"
        @send-audio="handleSendAudio"
        @send-image="handleSendImage"
        @send-file="handleSendFile"
      />
    </div>
    <!-- <ChatRecorder v-show="showRecorder" @recorder-end="recorderEnd" ref="recorder" /> -->
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from 'vuex'
import OnlineStatus from '@/components/OnlineStatus'
import ChatMsgList from './ChatMsgList'
import ChatBottom from './ChatBottom.vue'

export default {
  name: 'Chat',
  components: { OnlineStatus, ChatMsgList, ChatBottom },
  data() {
    return {
      chatMsgList: null,
      showRecorder: false
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'chatList']),
    contactId() {
      return this.$route.params.id
    },
    chatInfo() {
      return (
        this.chatList.find(item => item.contactId === this.contactId) || {
          name: '',
          online: 0
        }
      )
    }
  },
  async created() {},
  async mounted() {
    await this.activedChatItem()
    this.chatMsgList = this.$refs.chatMsgList
  },
  beforeDestroy() {
    this.deActivedChatItem()
  },
  activated() {
    this.activedChatItem()
  },
  deactivated() {
    this.deActivedChatItem()
  },
  methods: {
    ...mapActions({
      genSendData: 'chatHistory/genSendData',
      // getContactInfo: 'contact/getContactInfo',
      setChatUnread: 'chatList/setChatUnread',
      sendFile: 'chatHistory/sendFile'
    }),
    ...mapMutations({
      updateChatMsg: 'chat/UPDATE_CHAT_MSG'
    }),
    async activedChatItem() {
      const contactId = this.contactId
      this.$store.commit('chat/SET_ACTIVED_CONTACT_ID', contactId)
      await this.setChatUnread({ contactId, unread: 0 })
    },
    deActivedChatItem() {
      this.$store.commit('chat/SET_ACTIVED_CONTACT_ID', null)
    },
    goBack() {
      this.$router.push('/chat')
    },
    async handleSendText(text) {
      const chatMsg = await this.genSendData({
        to: this.contactId,
        content: text,
        type: 'text'
      })
      this.$socket.emit('text', chatMsg)
      this.$nextTick(() => {
        this.chatMsgList.refresh()
        this.chatMsgList.scrollBottom(500)
      })
    },
    async handleSendAudio({ blob, duration }) {
      const chatMsg = await this.genSendData({
        to: this.contactId,
        file: blob,
        duration,
        type: 'audio'
      })
      this.$socket.emit('audio', chatMsg)
      this.$nextTick(() => {
        this.chatMsgList.refresh()
        this.chatMsgList.scrollBottom(500)
      })
    },
    // TODO:
    async handleSendImage(imgs) {
      imgs.forEach((img) => {
        this.sendFile({ file: img, to: this.contactId, type: 'image' })
      })
      this.$nextTick(() => {
        this.chatMsgList.refresh()
        this.chatMsgList.scrollBottom(500)
        this.$previewRefresh()
      })
    },

    async handleSendFile(files) {
      console.log('handleSendFile----', files)
      const file = files[0]
      await this.sendFile({ file, to: this.contactId })
      this.$nextTick(() => {
        this.chatMsgList.refresh()
        this.chatMsgList.scrollBottom(500)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.chat-container {
  height: calc(var(--vh) * 100);
  background-color: $bg-color;
  padding-top: $nav-bar-height;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  .title {
    display: flex;
    align-items: flex-end;
    .title-name {
      margin-right: $padding-side;
    }
  }
  .chat {
    width: 100%;
    // min-height: 100%;
    box-sizing: border-box;
    // padding-top: $nav-bar-height;
    position: absolute;
    bottom: 0;
  }
}
</style>
